<template>
	<view class="module">
		<view class="content">
			<image class="logo" src="../../static/login/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
			<view class="input">
				<u-form labelPosition="left" :model="info">
					<u-form-item prop="userInfo.phone" borderBottom>
						<u-input placeholder="请输入手机号" maxlength="11" v-model.trim="info.phone" border="none"
							type="number" @input="changeValue">
							<template slot="prefix">
								<view style="width: 80rpx;">
									<u-icon name="account" color="#8f8f94" size="20"></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="userInfo.code" borderBottom v-if="index===1">
						<u-input placeholder="请输入验证码" maxlength="6" v-model.trim="info.code" border="none"
							type="number">
							<template slot="prefix">
								<view style="width: 80rpx;">
									<u-icon name="lock" color="#8f8f94" size="20"></u-icon>
								</view>
							</template>
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获"></u-code>
								<u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>
							</template>
							<!-- <Code @getCode="getCodeClick" :bgColor="bgColor" :color="color"></Code> -->

						</u-input>
					</u-form-item>
					<u-form-item prop="userInfo.password" borderBottom ref="item1" v-if="index===0">
						<u-input placeholder="请输入密码" maxlength="11" v-model="info.password" border="none"
							type="password">
							<template slot="prefix">
								<view style="width: 80rpx;">
									<u-icon name="lock" color="#8f8f94" size="20"></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="button_box">
				<view class="flexBetween">
					<view class="center_text">
						<view>还没账号</view>? <view class="text" @click="noNumber">去注册</view>
					</view>
					<view @click="showSms" v-if="index===0">短信验证码登录</view>
					<view @click="showPassword" v-if="index===1">密码登录</view>
				</view>
				<MButton name="登录" @click="toLogin" colorType="topic"></MButton>
				<view class="submit_code">
					<view class="center">
						<u-checkbox-group v-model="isChecked"  @change="checked">
							<u-checkbox shape="circle" ></u-checkbox>
						</u-checkbox-group>
						<view class="soft_agreement">我已阅读并同意
							<text @click="toUserAgreement" style="color:rgb(31, 137, 236)">《用户协议》</text>
							和<text @click="toPrivacyPolicy" style="color:rgb(31, 137, 236)">《隐私政策》</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getLoginCode,
		getLogin,
		phone
	} from '@/api/login/index.js';
	import isValidPhoneNumber from "@/utils/vaildatetell.js"
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				title: ' ',
				index: 0,
				bgColor: '',
				color: '#c4ccd4',
				isChecked: false,

				info: {
					phone: '',
					password: '',
					code: ''
				}
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				uni.navigateTo({
					url: "../home/index",
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (!isValidPhoneNumber(this.info.phone)) return this.$refs.uToast.show({
						type: 'error',
						message: "请输入正确手机号"
					})
					const res = await getLoginCode(this.info.phone)
					this.$refs.uToast.show({
						type: 'success',
						message: "验证码已发送"
					})
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				} else {
					this.$refs.uToast.show({
						type: 'woring',
						message: "请稍等"
					})
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			toUserAgreement() {
				uni.navigateTo({
					url: '/pages/my/userAgreement',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			toPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/my/privacy',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			changeValue(e) {

				if (e.length == 11) {
					// this.bgColor = 'primary'
					this.bgColor = '#1f89ec'
					this.color = '#fff'
				} else {
					this.bgColor = ''
				}
			},
			checked() {
				this.isChecked = !this.isChecked
			},
			showPassword() {
				this.index = 0
			},
			showSms() {
				this.index = 1
			},
			enroll() {
				// pages/landlord/contactInfo
				// ./enroll
				uni.navigateTo({
					url: '/pages/landlord/application',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			noNumber() {
				uni.navigateTo({
					url: './enroll',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			//账号密码登录
			async login() {
				const res = await getLogin({
					loginType: String(this.index), //登录类型状态
					username: this.info.phone,
					password: this.info.password
				})
				if (res.data.code == 200) {
					
					this.$refs.uToast.show({
						message: '登录成功',
						type: 'success',
					})
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('phone', this.info.phone)
					uni.reLaunch({
						url: '../home/index',
						animationType: this.animation.type,
						animationDuration: this.animation.time
					})
	
				} else {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error',

					})
				}
			},
			//手机验证码登录
			async getPhoneLogin() {
				const res = await phone({
					loginType: String(this.index), //登录类型状态
					phone: this.info.phone,
					code: this.info.code
				})
				if (res.data.code == 200) {
                    
					uni.setStorageSync('token', res.data.token);
 
					this.$refs.uToast.show({
						message: '登录成功',
						type: 'success',
					})
					
					setTimeout(() => {
						uni.reLaunch({
							url: '../home/index',
							animationType: this.animation.type,
							animationDuration: this.animation.time
						})
					}, 500)

				} else {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error',

					})
				}
			},
			//验证码发送
			async getCodeClick() {
				const res = await getLoginCode(this.info.phone)
				if (res.data.code != 200) return
				this.$refs.uToast.show({
					message: '验证码已发送',
					type: "success"
				})
			},
			//登录
			toLogin() {
				if (!isValidPhoneNumber(this.info.phone)) {
					this.$refs.uToast.show({
						message: "请输入正确手机号",
						type: 'error'
					})
					return
				}
				const phone = /^1[3-9]\d{9}$/;
				if (!phone.test(this.info.phone)) {
					this.info.phone = ""
					return this.$refs.uToast.show({
						message: '请输入正确的手机号',
						type: "error"
					})
				}
				if (!this.isChecked) return this.$refs.uToast.show({
					message: "请先同意协议",
					type: 'error'
				})
				//如果密码登录
				if (this.index == 0) {
					if (this.info.password == '') return this.$refs.uToast.show({
						message: "请输入六位数密码",
						type: 'error'
					})
					this.login()
				} else {
					if (this.info.code == "") {

						this.$refs.uToast.show({
							message: "请输入验证码",
							type: 'error'
						})
						return
					}
					this.getPhoneLogin()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/global.scss";
	@import "~@/styles/index.scss";

	.module {
		padding: 0rpx 80rpx;
		box-sizing: border-box;

		.content {
			flex-direction: column;
			@include flexCenter
		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 60rpx;
			margin-left: auto;
			margin-right: auto;
		}

		.text-area {
			text-align: center;
			// margin-top: 30rpx;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}

		.input {
			margin-top: 80rpx;
			font-size: 28rpx;
			width: 100% !important;
		}

		.button_box {
			text-align: center;
			color: #8f8f94;
			font-size: 28rpx;

			.flexBetween {
				@include flexBetween;
				line-height: 120rpx;
			} 
			.center_text {
				display: flex;
				align-items: center;

				.text {
					color: $theme;
				}
			}
			.submit_code {
				margin-top: 120rpx;
			
				.center {
					display: flex;
					align-items: center;
				}
			}
		}
		
	}
</style>